<template>
  <el-card>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 登录账户个人设置-->
      <el-tab-pane label="登录账户个人设置" name="first">
        <el-form
          class="person"
          :model="ruleForm"
          :rules="rules"
           ref="ruleForm"
        >
          <el-form-item  label="姓名" prop='username'>
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item  label="密码" prop='password'>
            <el-input
            
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"  >更新</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 个人详情-->
      <el-tab-pane label="个人详情" name="second">
        <el-form  inline label-width="80px" class="form2" 
        :model="PersonForm"
         ref="PersonForm"
        :rules="PersonFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工号" prop="workNumber" >
            <el-input v-model="PersonForm.workNumber"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="入职时间" prop="timeOfEntry">
             <el-date-picker type="date" placeholder="选择日期" v-model="PersonForm.correctionTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
            </el-col>
        </el-row>
        <!-- 2 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名"  prop="username">
              <el-input v-model="PersonForm.username"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="部门" prop="departmentName">
           <el-input v-model="PersonForm.departmentName"></el-input>
          </el-form-item>
            </el-col>
        </el-row>
        <!-- 3 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile">
              <el-input  v-model="PersonForm.mobile"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="应聘形式" >
            <el-input v-model="PersonForm.departmentName"></el-input>
          </el-form-item>
            </el-col>
        </el-row>
        <!-- 图片 -->
<el-form-item label='员工头像'>
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
 >
  <img v-if="UserMsg.taffPhoto" :src="PersonForm.taffPhoto" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

</el-form-item>

<el-form-item>
<el-button type='primary' @click="updataPerson">保存更新</el-button>
<el-button >返回</el-button>
</el-form-item>
        </el-form>
        <!-- 基本信息 -->
<p>基本信息 </p>
<!--
<el-form>
          <el-form-item label="最高学历">
           <el-select  placeholder="请选择活动区域" v-model="PersonalInfo.theHighestDegreeOfEducation">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
          </el-form-item>
         学员照片 
         <el-form-item label='员工头像'>
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

</el-form-item>
//国家/地区
  <el-form-item label="国家/地区">
    <el-select  placeholder="请选择活动区域" v-model="PersonalInfo.nationalArea">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
          </el-form-item>
          护照名
           <el-form-item label="护照名">
              <el-input placeholder=""></el-input>
            </el-form-item>
            身份证号
             <el-form-item label="身份证号">
              <el-input placeholder=""></el-input>
            </el-form-item>
            籍贯
             <el-form-item label="籍贯">
              <el-input placeholder=""></el-input>
            </el-form-item>
            民族
             <el-form-item label="民族">
              <el-input v-model="PersonalInfo.nation"></el-input>
            </el-form-item>
            婚姻状况
             <el-form-item label="婚姻状况"  >
             <el-select  placeholder="请选择活动区域" v-model="PersonalInfo.maritalStatus">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
          </el-select>
            </el-form-item>
            生日
            <el-form-item label="生日">
              <el-input v-model="PersonalInfo.birthday" ></el-input>
            </el-form-item>
            年龄
             <el-form-item label="年龄">
              <el-input  v-model="PersonalInfo.age" ></el-input>
            </el-form-item>
            星座
             <el-form-item label="婚姻状况">
             <el-select  placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
          </el-select>
            </el-form-item>
            血型
              <el-form-item label="血型">
             <el-select  placeholder="请选择活动区域"  v-model="PersonalInfo.bloodType" >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
          </el-select>
            </el-form-item>
              户籍所在地
             <el-form-item label="户籍所在地">
              <el-input placeholder=""></el-input>
            </el-form-item>
              政治面貌
             <el-form-item label="政治面貌">
              <el-input v-model="PersonalInfo.politicalOutlook" ></el-input>
            </el-form-item>
            入党时间
             <el-form-item label="入党时间">
             <el-date-picker type="date" placeholder="选择日期" v-model="PersonalInfo.correctionTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          存档机构 
            <el-form-item label="存档机构">
              <el-input placeholder=""></el-input>
            </el-form-item>
            子女状态
            <el-form-item label="子女状态">
              <el-input placeholder=""></el-input>
            </el-form-item>
            子女有无商业险
              <el-form-item label="女有无商业险">
    <el-radio-group >
      <el-radio label="有"></el-radio>
      <el-radio label="无"></el-radio>
    </el-radio-group>
  </el-form-item>
  有无违法违纪状态
   <el-form-item label="有无违法违纪状态">
              <el-input  ></el-input>
            </el-form-item>
            有无重大病史
             <el-form-item label="有无重大病史">
              <el-input v-model="PersonalInfo.areThereAnyMajorMedicalHistories"></el-input>
            </el-form-item>
            <p>通讯信息</p>
            QQ
             <el-form-item label="QQ">
              <el-input placeholder=""></el-input>
            </el-form-item>
            /微信
            <el-form-item label="微信">
              <el-input placeholder=""></el-input>
            </el-form-item>
            现居住地
            <el-form-item label="现居住地">
              <el-input placeholder=""></el-input>
            </el-form-item>
            通讯地址
            <el-form-item label="通讯地址">
              <el-input placeholder=""></el-input>
            </el-form-item>
            联系手机
             <el-form-item label="联系手机">
              <el-input placeholder=""></el-input>
            </el-form-item>
            个人邮箱
             <el-form-item label="个人邮箱">
              <el-input placeholder=""></el-input>
            </el-form-item>
            紧急联系人
             <el-form-item label="紧急联系人">
              <el-input placeholder=""></el-input>
            </el-form-item>
            紧急联系电话
             <el-form-item label="紧急联系电话">
              <el-input placeholder=""></el-input>
            </el-form-item>
            <p>账号信息</p>
            社保电脑号
             <el-form-item label="社保电脑号">
              <el-input placeholder=""></el-input>
            </el-form-item>
            公积金账号
            <el-form-item label="公积金账号">
              <el-input placeholder=""></el-input>
            </el-form-item>
            银行卡号
             <el-form-item label="银行卡号">
              <el-input placeholder=""></el-input>
            </el-form-item>
            开户行
            <el-form-item label="开户行">
              <el-input placeholder=""></el-input>
            </el-form-item>
            教育信息
              <p>教育信息</p>
              学历类型
              <el-form-item label="学历类型">
             <el-select  placeholder="请选择活动区域">
          <el-option label="区域一" value='1'></el-option>
          <el-option label="区域二" value='2'></el-option>
          </el-select>
            </el-form-item>
            毕业学校
              <el-form-item label="毕业学校">
              <el-input placeholder=""></el-input>
            </el-form-item>
            入学时间
            <el-form-item label="入学时间">
             <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
          、毕/业时间
           <el-form-item label="毕业时间">
             <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
          专业/
           <el-form-item label="专业">
              <el-input placeholder=""></el-input>
            </el-form-item>
            从业信息
            <p>从业信息</p>
            上家公司
             <el-form-item label="上家公司">
              <el-input placeholder=""></el-input>
            </el-form-item>
            职称
             <el-form-item label="职称">
              <el-input placeholder=""></el-input>
            </el-form-item>
            有/无竞业限制
            <el-form-item label="有无竞业限制">
              <el-input placeholder=""></el-input>
            </el-form-item>
            备注
              <el-form-item label="备注">
        <el-input type="textarea" ></el-input>
      </el-form-item>
      操作
       <el-form-item >
      <el-button type='primary'>保存更新</el-button>
      <el-button>取消</el-button>
      </el-form-item>
        </el-form> 
    -->
    
      </el-tab-pane>
      <el-tab-pane label="岗位信息" name="third"> </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import {User,UserMsg,PersonalInfo,jobs,EditUser} from '@/api/http'
export default {
  data() {
    const samePwdFn = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error("两次输入的密码不一致！"));
      } else {
        callback();
      }
    };
    return {
      activeName: "second",
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入账号", trigger: "blur" },

          {
            pattern: /^\S{6,15}$/,
            message: "密码必须是6-15的非空字符串",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码必须是6-15的非空字符串",
            trigger: "blur",
          },
          { validator: samePwdFn, trigger: "blur" },
        ],
      },
      PersonFormRules:{},
      PersonForm:{
       staffPhoto:'',
       id:'',
       mobile:'',
       username:'',
       password:'',
       timeOfEntry:'',
       workNumber:'',
       correctionTime:'',
       departmentName:'',
       roleIds:[],
       companyId:'',
       companyName:'',
       enableState:'',
       createTime:'',
       departmentId:'',
       formOfEmployment:'',
       formOfManagement:'',
       workingCity:'',
       correctionTime:'',
       inServiceStatus:'',
       
       


      },
      // id:this.$route.query.id,
      UserMsg:[],
      PersonalInfo:[],
     
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
  async  getUserMsg(){
       const res = await UserMsg(this.$route.query.id)
       console.log('在detail')
        console.log(res.data.data)
        this.UserMsg = res.data.data 
         this.PersonForm.mobile = res.data.data.mobile
         this.ruleForm.username = res.data.data.username
         this.PersonForm.username = res.data.data.username
         this.PersonForm.timeOfEntry= res.data.data.timeOfEntry
         this.PersonForm.workNumber = res.data.data.workNumber
         this.PersonForm.roleIds = res.data.data.roleIds
         this.PersonForm.departmentName = res.data.data.departmentName
         this.PersonForm.correctionTime = res.data.data.correctionTime
         this.PersonForm.staffPhoto = res.data.data.staffPhoto
         this.PersonForm.companyId = res.data.data.companyId
         this.PersonForm.companyName = res.data.data.companyName
         this.PersonForm.password = res.data.data.password
         this.PersonForm.id = res.data.data.id
        // console.log(this.PersonForm.mobile)
          console.log(this.PersonForm)

    },
 async   getPersonalInfo(){
      const res = await PersonalInfo(this.$route.query.id)
      console.log('PersonalInfo',res.data)
      this.PersonalInfo = res.data.data
    },
    async getjobs (){
      const res = await jobs(this.$route.query.id)
      console.log('jobs',res)
    },
 async   updataPerson(){
      console.log('updataPerson')
      console.log(this.PersonForm)
       const {data: res} = await EditUser(this.$route.query.id,{data:this.PersonForm})
       console.log('EditUser',res)
       if(res.success===false){
         this.$message.error(res.message)
       }else{
        this.$message.success(res.message)
       }
      

    }
  },
  created() {
    this.getUserMsg()
    this.getPersonalInfo()
    this.getjobs()
  },
};
</script>
<style lang="less" scoped>
.el-card {
}
.person {
  width: 800px;
  padding: 10px 0;
  .el-input {
    width: 400px;
  }
}
.form2 {
  padding: 10px 0;
   .el-input {
    width: 300px;
  }
  .el-date-picker{
     width: 300px;
  }
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-tabs{
    min-height: 500px;
  }
</style>